<template>
   <el-carousel  height="190px" :interval="5000" arrow="always">
            <el-carousel-item v-for="item in banners" :key="item.image">
            <!-- <h3>{{ item }}</h3> -->
            <el-image :src="item.image" @load="imgLoad"></el-image>
            </el-carousel-item>
    </el-carousel>
</template>

<script>
export default {
    props: {
        banners:{
            type:Array,
            default(){
                return []
            }
        }
    },
    data () {
        return {
            loadStateIsOk:false
        }
    },
    methods: {
        imgLoad(){
            if(!this.loadStateIsOk){                
                this.$emit("imgHasLoad");
                this.loadStateIsOk=true
            }
        }
    }
}
</script>

<style>
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>